import isFunction from "./isFunction";
import isFunctionComponent from "./isFunctionComponent";
import mountNativeElement from "./mountNativeElement";

export default function mountComponent(virtualDOM, container) {
  let nextVirtualDOM = null
  // 判断是类组件还是函数组件，根据这个组件的身上有没有render方法来判断。
  // 没有render方法就是函数组件
  if (isFunctionComponent(virtualDOM)) {
    // 函数组件
    nextVirtualDOM = buildFunctionComponent(virtualDOM)
    // console.log('函数组件的virtualDOM：', nextVirtualDOM)
  } else {
    // 类组件
    nextVirtualDOM = buildClassComponent(virtualDOM)
  }
  // 考虑函数组件里返回的还是个函数组件，不能直接调用mountNativeElement方法
  // 再次判断这个nextVirtualDOM是否是函数节点的virtualDOM
  if (isFunction(nextVirtualDOM)) {
    mountComponent(nextVirtualDOM, container)
  } else {
    mountNativeElement(nextVirtualDOM, container)
  }
}

// 声明一个方法处理函数组件
function buildFunctionComponent(virtualDOM) {
  // virtualDOM.type里存储的就是函数组件本身，直接调用就好了
  // 调用后就返回函数组件里普通元素的virtualDOM了
  // return virtualDOM.type()
  // 与上一行效果一样？？
  return virtualDOM.type(virtualDOM.props || {})
}

// 处理类组件
function buildClassComponent(virtualDOM) {
  // 获取组件的实例对象
  const component = new virtualDOM.type(virtualDOM.props)
  // 调用组件的render方法，获取组件的virtualDOM
  const nextVirtualDOM = component.render()
  return nextVirtualDOM
}